<template>
<!--  240×229-->
  <div id="reg-slide">
    <!--    验证码-->
    <Vcode :show="isShow" @success="success" @close="close" />
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="formRules"
      status-icon
      style="max-width: 70%"
      class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-input v-model="form.username" type="text" autocomplete="off" prefix-icon="el-icon-user" placeholder="请输入用户号"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          type="password"
          autocomplete="off"
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item prop="checkedPassword">
        <el-input
          v-model="form.checkedPassword"
          type="password"
          autocomplete="off"
          prefix-icon="el-icon-lock"
          placeholder="请再次输入密码"
        />
      </el-form-item>
      <el-form-item style="">
        <el-button
          class="reg-box"
          type="primary"
          @click="submit(form)"
          round
        >
          注册
        </el-button>
        <el-button
          class="reset-box"
          @click="reset"
          round
        >
          重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
import $ from 'jquery';
export default {
  name: "register",
  components: {
    Vcode
  },
  data(){
    const form={
      username: '',
      password: '',
      checkedPassword: ''
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {   //value为input输入的值
        callback(new Error('密码不能为空'))   //回滚message的值
      } else {
        // if (form.checkedPassword !== '') {  //
        //   if (!form.value) return
        //   from.value.validateField('checkedPassword', () => null)
        // }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请重新输入密码'))
      } else if (value !== form.password) {
        callback(new Error("两次输入密码不一致"))
      } else {
        callback()
      }
    }
    return {
      form,
      isShow: false,
      formRules:{
        username: [
          {required: true,message: '用户名不能为空',trigger: 'blur'},
          {min: 2,max:7,message:'长度在2到7之间',trigger: 'blur'}
        ],
        password: [
          {min: 3,max: 7,message:'长度在3到7之间',trigger: 'blur'},
          { validator: validatePass, trigger: 'blur' }
        ],
        checkedPassword: [{ validator: validatePass2, trigger: 'blur' }],
      }
    }
  },
  mounted() {
    this.show();
  },
  methods:{
    submit(data) {
      let username_len = data.username.length;
      let password_len = data.password.length;
      let checked_len = data.checkedPassword.length;
      if(username_len !== 0 && password_len !== 0 && checked_len !== 0){
        this.isShow = true;
      }
      else{
        this.$message({
          type: 'warning',
          message: '请按照要求输入'
        })
      }
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = false;
    },
    //重置
    reset(){
      this.form.username = this.form.password = this.form.checkedPassword = ''
    },
    show(){
      $("#reg-slide").fadeOut(1,'swing');
      $("#reg-slide").fadeIn(500,'swing')
    }
  }
}
</script>

<style scoped>
.reg-box{
  width: 185px;
}
.reset-box{
  width: 90px;
}
</style>
